<template>
  <div class="common-layout">
    <el-container>
      <el-aside :style="{ width: asideWidtj }">
        <el-menu
          router
          :collapse-transition="false"
          style="height: 100%; min-height: 100vh"
          active-text-color="#ffd04b"
          background-color="#545c64"
          class="el-menu-vertical-demo"
          :default-active="defaultActiveRouter"
          text-color="#fff"
        >
          <div class="testdiv">
            <!-- <div><img src="../../../public/vite.svg" alt="" srcset="" style="  vertical-align: middle;"></div> -->
            <div>后台管理系统</div>
          </div>
          <!-- <el-menu-item index="/admin/index">
            <el-icon>
              <House />
            </el-icon>
            <template #title>主页</template>
          </el-menu-item> -->
          <el-sub-menu index="2">
            <template #title>
              <el-icon><Tickets /></el-icon>
              <span>订单管理</span>
            </template>
            <el-menu-item index="/admin/orderManager">订单管理</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="3">
            <template #title>
              <el-icon><Fries /></el-icon>
              <span>蛋糕管理</span>
            </template>
            <el-menu-item index="/admin/cakeManager">蛋糕管理</el-menu-item>
            <el-menu-item index="/admin/classifyManager">分类管理</el-menu-item>
            <el-menu-item index="/admin/flavorManager">口味管理</el-menu-item>
            <el-menu-item index="/admin/crowdManager">人群管理</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="5">
            <template #title>
              <el-icon><Setting /></el-icon>
              <span>系统管理</span>
            </template>
            <el-menu-item index="/admin/customerManager">用户管理</el-menu-item>
            <el-menu-item index="/admin/filesManager">文件管理</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <el-menu class="el-menu-demo" mode="horizontal" :ellipsis="false">
            <div class="flex-grow" />
            <el-sub-menu index="0">
              <template #title>{{ nickName }}</template>
              <el-menu-item index="0-1" @click="updateInfo">个人信息</el-menu-item>
              <el-menu-item index="0-2" @click="logout">退出登录</el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
      <el-dialog v-model="updataDialogVisible" title="修改信息" style="width: 600px">
        <el-form label-width="100px" style="width: 460px">
          <el-form-item label="用户名">
            <el-input disabled v-model="state.oneCustomerInfo.username" />
          </el-form-item>
          <el-form-item label="昵称">
            <el-input v-model="state.oneCustomerInfo.nickname" />
          </el-form-item>
          <el-form-item label="" class="text-center">
            <el-button
              @click="confirmUpdata(state.oneCustomerInfo.id)"
              type="success"
              style="width: 100%"
              >保存修改</el-button
            >
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-container>
  </div>
</template>
<script setup>
import {
  House,
  Menu as IconMenu,
  Location,
  Fries,
  Setting,
  Tickets,
} from "@element-plus/icons-vue";
import router from "../../router";
import { ElMessage } from "element-plus";
import { ref, watch, onBeforeMount, reactive } from "vue";
import request from "../../api/request";
import { useRoute } from "vue-router";
const route = useRoute();
const tabs = ref([]);
const state = reactive({
  oneCustomerInfo: {},
});
const defaultActiveRouter = ref("/admin/index");
const asideWidtj = ref("200px");
const nickName = ref("");
const updataDialogVisible = ref(false);
onBeforeMount(() => {
  authenticationFn();
});
const authenticationFn = () => {
  let authentication = localStorage.getItem("adminInfo");
  nickName.value = localStorage.getItem("adminNickname");
  state.oneCustomerInfo.id = authentication;
  state.oneCustomerInfo.username = localStorage.getItem("adminUsername");
  state.oneCustomerInfo.nickname = nickName.value;
  if (!(authentication == 2)) {
    router.push("/admin/login");
    ElMessage.error("请先登录");
    return;
  }
};
// const handleOpen = (key, keyPath) => {
//   console.log(key, keyPath)
// }
// const handleClose = (key, keyPath) => {
//   console.log(key, keyPath)
// }
const logout = () => {
  localStorage.removeItem("adminInfo");
  localStorage.removeItem("adminNickname");
  localStorage.removeItem("adminUsername");
  ElMessage({
    message: "已安全退出",
    type: "success",
  });
  router.push("/admin/login");
};
const updateInfo = () => {
  updataDialogVisible.value = true;
};
const confirmUpdata = (id) => {
  request.post("/admin/update", state.oneCustomerInfo).then((res) => {
    if (res.code == 200) {
      ElMessage({
        type: "success",
        message: "修改成功，请重新登录",
      });
      updataDialogVisible.value = false;
      setTimeout(() => {
        localStorage.removeItem("adminInfo");
        localStorage.removeItem("adminNickname");
        localStorage.removeItem("adminUsername");
        router.push("/admin/login");
      }, 800);
    } else {
      ElMessage({
        type: "error",
        message: res.msg,
      });
    }
  });
};
</script>

<style>
.el-aside {
  width: unset;
}

.flex-grow {
  flex-grow: 1;
}

.testdiv {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  text-align: center;
  color: white;
}

.colloapse-box :hover {
  cursor: pointer;
}

.el-header {
  --el-header-padding: 0;
  --el-header-height: 60px;
  padding: var(--el-header-padding);
  box-sizing: border-box;
  flex-shrink: 0;
  height: var(--el-header-height);
}
</style>
